<!--@author vidy3587@gmail.com-->
<template>
  <div>
    <div class="short-video-page with-padding-bottom">
      <div class="with-banner">
        <div class="title-bar">作品详情</div>
        <div class="detail-content">
          <div class="vote-number">1546 号</div>
          <div class="video-box">
            <video src="" class="video"></video>
          </div>
          <div class="video-title text-center">
            短视频名称
          </div>
          <div class="description-label">
            作品描述
          </div>
          <div class="description">
            这里是作品的文字描述；这里是作品的文字描述；这里是作品的文字描述；这里是作品的文字描述；这里是作品的文字描述；
          </div>
          <div class="btn-group">
            <button class="btn pink-btn block large" @click="giveTicket">
              投票
            </button>
            <button class="btn pink-ghost-btn block large round" @click="goRank">
              查看排行榜
            </button>
          </div>
        </div>

      </div>
    </div>
    <Modal :loading="isGiving" v-model="isModalShow">

      <div v-if="!isGiving">
        <div v-if="isGivingFailed">
          <div class="modal-image">
            <img class="smile-face" src="~@/assets/smile_purple.png" alt="">
          </div>
          <div class="modal-content">
            话筒已送完，明天再来
            支持TA吧！
          </div>
        </div>
        <div v-else>
          <div class="modal-image">
            <img class="smile-face" src="~@/assets/review_success_1.png" alt="">
          </div>
          <div class="modal-content">
            赠送成功！
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Modal from "@/core/components/Modal";
import {getUserIdAndNickNameFromRouteQuery} from "@/core/shared/getUserIdAndNickName";
export default {
  name: "Detail",
  components: {Modal},
  data () {
    return {
      isGivingFailed: false,
      isGiving: false,
      isModalShow: false
    };
  },

  methods: {
    giveTicket () {
      this.isModalShow = true;
    },
    goRank () {
      const userInfo = getUserIdAndNickNameFromRouteQuery(this);
      this.$router.push({
        name: 'short_video_rank',
        query: {userId: userInfo.id, nickName: userInfo.name},
      });
    }
  }
}
</script>

<style scoped lang="scss">
.detail-content {
  width: px2rem(670px);
  margin: px2rem(36px) auto 0 auto;
  color: $lightFontColor;
}

.video-box {
  margin-top: px2rem(22px);
  margin-bottom: px2rem(35px);
  width: px2rem(670px);
  height: px2rem(429px);
  background: $lightWarmColor;
  border-radius: px2rem(5px);
}

.video-title {
  font-size: px2rem(30px);
}

.vote-number {
  font-size: px2rem(24px);

}
.btn-group {
  margin-top: px2rem(59px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .btn {
    margin-bottom: px2rem(42px);
  }
}
.description-label {
  font-size: px2rem(32px);
  color: #73F0C9;
  line-height: px2rem(120px);
}
.pink-ghost-btn {

  border: px2rem(2px) solid #FFC2DF;
  background: transparent;
  width: px2rem(560px);
  font-size: px2rem(36px);
}

//.modal-image {
//  width: 100%;
//  text-align: center;
//  margin-top: px2rem(152px);
//  margin-right: auto;
//  margin-left: auto;
//  margin-bottom: px2rem(29px);
//}

.modal-content {
  font-size: px2rem(36px);
  color: #F2E630;
  letter-spacing: 0;
  text-align: center;
  width: px2rem(360px);
  margin: 0 auto;
}

.smile-face {
  margin: 0 auto;
  width: px2rem(432px);
  height: px2rem(152px);
}

.video {
  width: 100%;
  height: 100%;
}
</style>